<template>
	<div class="box">
		<div class="phone">
			<div class="phone-son">
				<div class="header">
					<div class="left">
						10:00
					</div>
					<div class="right">
						<Icon type="ios-bluetooth" />
						<Icon type="ios-wifi" />
						<Icon type="ios-battery-full" />
					</div>
				</div>
				<div class="content" v-html="context"></div>
				<div class="bottom"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			context: String,
			required: true
		}
	}
</script>

<style lang="scss"	>
	img {
		max-width: 100% ;
		height: auto ;
	}

	.box {
		width: 400px;
		height: 700px;
		margin: 0 auto;
	}

	.phone {
		// margin-top: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 250px;
		height: 550px;
		border-radius: 30px;
		// background-color: #d1d1d1;
		box-shadow: 0px 6px 18px rgba(0, 0, 0, .1);
	}

	.phone-son {
		width: 248px;
		height: 538px;
		background-color: #fff;
		border-radius: 40px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 0 auto;

		.left {
			margin-top: 10px;
			margin-left: 20px;
			color: #ccc;
		}

		.right {
			margin-top: 10px;
			margin-right: 20px;
			color: #ccc;
			letter-spacing: 5px;
		}
	}

	.bottom {
		position: absolute;
		bottom: 10px;
		width: 130px;
		height: 5px;
		left: 50%;
		border-radius: 2.5px;
		margin-left: -65px;
		background-color: #ccc;
	}

	.content {
		margin-top: 0px;
		width: 248px;
		height: 488px;
		// background-color: red;
		padding: 5px 10px;
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: scroll;
		text-align: left;
		

	}

	::-webkit-scrollbar {
		width: 5px;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgba(0, 0, 0, 0.1);
	}
</style>
